<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        .number{
            display: inline-block;

        }
        .number>*{
            border: none;
            text-align: center;

        }
        .number>button {
            padding-top: 10px;
            padding-left: 5px;

        }
        .number>input{
            width: 100px;

        }

    </style>
</head>
<body>
<div id="app">
    <number :value="99" ref="a" @my-change="onChange"></number>
    <number :value="99" ref="b"></number>
    <button @click="alert($refs.a.value)">value的值</button>

</div>
<script>
    var values=99;


    Vue.component("number",{
        props:{
          value:Number,
          step:{type:Number,default:1}
        },
        el:"#app",
        template:`
            <div calss="number">
              <button    id="sub"  @click="value-=step" @click="setting()">-</button>
                <input type="number" v-model="value">
                <button  id="add"  @click="value+=step" @click="setting()">+</button>
            </div>

        `,
        created(){
            console.log(this.$parent.code);
        },
        watch: {
            value(newValue,oldValue){
                console.log(newValue);
                this.$emit("my-change",newValue),
                values=newValue
            },

        },

    })

    var v=new Vue({
        el:"#app",
        data:{
            code:100,
        },
        methods:{
            onChange(newValue){
            alert(newValue)
            }
        }
    })

    function  setting(){
        if(values>100) {
            document.getElementById("add").disabled = true;
            values++;
        }else {
            document.getElementById("add").disabled = false;
            values++;
        }
        if(values<90) {
            document.getElementById("sub").disabled = true;
            values--;
        }else {
            document.getElementById("sub").disabled = false;
            values--;
        }
    }





</script>
</body>
</html>